<template>
  <div class="container">
    <el-row :gutter="20" class="attBox">
      <el-col :span="12" class="conBox leftBox">
        <div class="grid-content bg-purple childBox">
          <div :class="[isWidth ? 'maxInfoBox' : 'minInfoBox']">
            <p class="attTitleBox">今日考勤概要</p>
            <div class="echartsBox">
              <div id="attChart" class="chartbg"></div>
            </div>
          </div>
          <ul class="staticBox">
            <li>
              <span>项目在职人员</span>
              <span>{{ empOnJob }}人</span>
            </li>
            <li>
              <span>今日出勤人数</span>
              <span>{{ attTodayTotal }}人</span>
            </li>
            <li>
              <span>考勤率</span>
              <span>{{ attTotalRate }}%</span>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="12" class="conBox rightBox">
        <div
          class="grid-content bg-purple"
          style="height: 100%; overflow-y: auto"
        >
          <ul class="clearfix" v-if="info && info.length > 0">
            <li
              class="infoBox clearfix"
              v-for="(item, i) of info"
              :key="i"
              @click="goProDetail(item.projectId)"
            >
              <div class="fl">
                <el-image
                  v-if="item.path"
                  style="width: 60px; height: 60px"
                  :src="item.path"
                ></el-image>
                <img
                  v-else
                  src="../../../static/img/personBg.png"
                  alt
                  width="60px"
                  height="60px"
                />
              </div>
              <div
                class="fl"
                style="padding-left: 5px; width: calc(100% - 60px)"
              >
                <p class="nameBox">{{ item.employeeName }}</p>
                <p>
                  <span class="comName">{{ item.companyName }}</span>
                </p>
                <p class="personType">
                  <span>{{ item.groupName }}</span>
                </p>
                <span class="time">{{ item.punchTime }}</span>
              </div>
            </li>
          </ul>
          <div class="emptySty" v-else>
            <span>- 当日暂无考勤数据 -</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'attManagement',
  components: {},
  computed: {
    projectId() {
      return this.$store.getters.eZhouprojectId
    },
    area() {
      return this.$store.getters.eZhouArea
    },
  },
  watch: {
    area(val) {
      this.getAttData()
      this.getInfo()
    },
    projectId(newValue, oldValue) {
      this.getAttData()
      this.getInfo()
    },
  },
  data() {
    return {
      info: [],
      chart: '',
      attTotalRate: '',
      attTodayTotal: '',
      empOnJob: '',
      isWidth: true,
      attMyChart: '',
    }
  },
  created() {},
  mounted() {
    this.getAttData()
    this.getInfo()
    const windowWidth = window.screen.width
    if (windowWidth <= 1600) {
      this.isWidth = false
    }
    // this.echartsMit()
  },

  methods: {
    echartsMit() {
      var dom = document.getElementById('attChart')
      this.attMyChart = echarts.init(dom)
      var valueData = this.attTotalRate / 100
      this.attMyChart.setOption({
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            data: [valueData],
            color: ['#437def'],
            backgroundStyle: {
              // borderWidth: 5, //内边框宽度
              // borderColor: '#0ABB7E', //背景内边框
              color: '#000', //背景颜色
              opacity: 0.2,
              // shadowColor: '#0ABB7E', //阴影
              // shadowBlur: 10, //阴影模糊
            },
            // outline: {
            //     borderDistance: 20, //边框距离
            //     itemStyle: {
            //         borderWidth: 1,
            //         borderColor: '#0ABB7E',
            //         shadowBlur: 10,
            //         shadowColor: '#0ABB7E'
            //     }
            // },
            itemStyle: {
              // shadowBlur: 0,
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 3,
                borderColor: '#4e90d2',
                shadowBlur: 20,
              },
            },
            label: {
              normal: {
                formatter: function (param) {
                  var data = param.value * 100
                  return String(data).slice(0, 4) + '%'
                },
                textStyle: {
                  color: '#b8e8fa',
                  insideColor: 'yellow',
                  fontSize: 20,
                },
              },
            },
          },
        ],
      })
      window.onresize = function () {
        this.attMyChart.resize()
      }
    },
    // 获取考勤概况数据
    getAttData() {
      this.axios({
        method: 'post',
        url: '/api-att/cs/att/expand/atttodaytotal',
        data: { projectId: this.projectId },
      })
        .then((response) => {
          var data = response.data.result
          // if(this.isEZhouUser()) {
          //   this.attTotalRate = 100;
          // }else {
          this.attTotalRate = data.attTotalRate
          // }
          this.attTodayTotal = data.attTodayTotal
          this.empOnJob = data.empOnJob
          this.echartsMit()
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 3000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    getInfo() {
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      this.axios({
        method: 'post',
        url: 'api-att/cs/att/expand/attlist',
        data: {
          pageNo: 1,
          pageSize: 20,
          projectId: this.projectId,
          year: yy,
          month: mm,
          day: dd,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.info = res.data.result.results
            } else {
              this.$message.error('数据获取失败')
            }
          },
          (res) => {
            this.$message.error('数据获取失败')
          }
        )
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    goProDetail(projectId) {
      this.$router.push({
        path: '/home/monitorProjectManagement/projectDetail',
        name: 'projectDetail',
        query: {
          projectId: projectId,
          activeName: 'third',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/projectList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  .attBox {
    height: 100%;
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding-bottom: 10px;
    .conBox {
      height: 100%;
    }
    .leftBox {
      padding-right: 0 !important;
    }
    .rightBox {
      padding-left: 1px !important;
      // background-color:rgba(0,0,0,0.4);
      .infoBox {
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.4);
        margin-bottom: 1px;
        cursor: pointer;
        .nameBox {
          font-size: 12px;
          font-weight: 400;
          color: #0deff4;
        }
        .comName,
        .time,
        .personType {
          font-size: 12px;
          color: #b8e8fa;
        }
        // .time {
        //   position:absolute;
        //   right:20px;
        // }
        .line {
          display: inline-block;
          height: 11px;
          width: 1px;
          background: #b8e8fa;
          margin-left: 5px;
          margin-right: 5px;
        }
      }
      .emptySty {
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        position: relative;
        span {
          font-size: 12px;
          color: #b8e8fa;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .childBox {
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 16px;
      overflow-y: auto;
      .staticBox {
        margin-top: 16px;
        li {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
          justify-content: space-between;
          border: 1px solid #01b0ff;
          background: linear-gradient(
            0deg,
            rgba(19, 235, 241, 0.2) 0%,
            rgba(19, 240, 249, 0.2) 100%
          );
          // opacity: 0.6;
          border-radius: 5px;
          font-size: 12px;
          padding: 5px 8px;
          margin-bottom: 8px;
          &:last-child {
            margin-bottom: 0px;
          }
          span:first-child {
            color: #b8e8fa;
          }
          span:last-child {
            color: #5bfcf4;
          }
        }
      }
      .attTitleBox {
        color: #5bfcf4;
        font-size: 16px;
        padding-bottom: 5px;
        height: 30px;
        line-height: 30px;
        &::before {
          content: '';
          display: inline-block;
          height: 4px;
          width: 4px;
          border-radius: 50%;
          background: #5bfcf4;
          position: relative;
          top: -4px;
        }
      }
    }
  }
  .echartsBox {
    position: relative;
  }
  .chartbg {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .maxInfoBox {
    height: calc(100% - 120px);
  }
  .minInfoBox {
    height: calc(100% - 30px);
  }
}
</style>
